<template>
	<view class="rescue-detail-wrap">
		<navBar title="订单详情" :showHome="false" :showBack="true" :customBack="true" marginLeft="50px" @back="back" />
		<view class="content-box" :style="{ marginTop: getSystemInfo.navBarHeight + 'px' }">
			<view class="map-wrapper">
				<map id="mapBox" style="width:100%; height:100%" :latitude="mapInfo.latitude"
					:longitude="mapInfo.longitude" :show-compass="true" :enable-rotate="true" :markers="covers"
					:controls="controls" :show-location="true" :enable-poi="true" :show-scale="true" :circles="circles"
					:polyline="polyline" :scale="scale">
				</map>
			</view>
			<view class="detail-info">
				<view class="status-info">
					<view class="status-img">
						<image v-if="detailInfo.state == 1"
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/rescue-state1.png"
							mode=""></image>
						<image v-if="detailInfo.state == 2"
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/rescue-state2.png"
							mode=""></image>
						<image v-if="detailInfo.state == 3"
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/rescue-state3.png"
							mode=""></image>
						<image v-if="detailInfo.state == 4"
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/rescue-state4.png"
							mode=""></image>
						<image v-if="detailInfo.state == 5"
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/rescue-state5.png"
							mode=""></image>
						<image v-if="detailInfo.state == 6"
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/rescue-state6.png"
							mode=""></image>
						<view class="status-name" v-if="detailInfo.state == 1">待派单</view>
						<view class="status-name" v-if="detailInfo.state == 2">待救援</view>
						<view class="status-name" v-if="detailInfo.state == 3">救援中</view>
						<view class="status-name" v-if="detailInfo.state == 4">待付款</view>
						<view class="status-name" v-if="detailInfo.state == 5">已完成</view>
						<view class="status-name" v-if="detailInfo.state == 6">已取消</view>
						<!-- 时间显示 -->

						<view class="status-time" v-if="detailInfo.state == 1">{{ waitDispatchTime }}</view>
						<view class="status-time" v-if="detailInfo.state == 2">{{ waitRescueTime }}</view>
						<view class="status-time" v-if="detailInfo.state == 3">{{ rescueingTime }}</view>
					</view>
					<view class="pay-info" v-if="detailInfo.state == 4">
						<view class="pay-count">￥{{ detailInfo.totalPayment }}</view>
						<view class="pay-btn">
							<u-button type="primary" text="去支付" color="#CF1A1B" shape="circle"
								@click="payPop=true"></u-button>
						</view>
					</view>
					<view class="status-tip" v-if="detailInfo.state == 1">
						若您的情况比较紧急，可直接联系<text class="text-red" @click="callPhone"> 400 696 5399 </text>玲珑客服售后热线处理。
					</view>
					<view class="status-tip" v-if="detailInfo.state == 2">
						预计<text class="text-red"> {{ durationTime }} </text>分钟到达
					</view>
					<view class="status-tip" v-if="detailInfo.state == 3">
						师傅已到达，共耗时<text class="text-red">{{ totalTime?totalTime.split(':')[0]:0 }}分钟</text>
					</view>
					<view class="status-tip" v-if="detailInfo.state == 6">
						{{ detailInfo.cancelPerson}} {{detailInfo.cancelReason?','+detailInfo.cancelReason:''}}
					</view>
				</view>
				<view class="info-card store" v-if="detailInfo.terminalDetail">
					<view class="title">救援门店</view>
					<view class="store-info" @click="handleDetail(detailInfo.terminalDetail)">
						<image
							:src="detailInfo.terminalDetail.img?detailInfo.terminalDetail.img:'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/goods_nomal.png'"
							mode=""></image>
						<view class="store-del">
							<view class="store-del-list">
								<view class="store-name">{{ detailInfo.terminalDetail.terminalName }}</view>
								<view class="store-adress">{{ detailInfo.terminalDetail.address }}</view>
							</view>
							<u-icon name="arrow-right" size="30" color="#666666"></u-icon>
						</view>
					</view>
					<view class="card-plane lx">
						<view class="lx-it" style="color:#CF1A1B;"
							@click="handleAction('phone',detailInfo.terminalDetail)">
							<image
								src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/rescue-phone.png">
							</image>
							联系电话
						</view>
						<view class="lx-it" style="color:#1780F2;"
							@click="handleAction('map',detailInfo.terminalDetail)">
							<image
								src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/rescue-dh.png">
							</image>
							门店导航
						</view>
					</view>
				</view>
				<view class="info-card service-info">
					<view class="title">求助信息</view>
					<view class="card-plane project-name">
						<image :src="detailInfo.rescueProjectIcon">
						</image>
						<text>{{ detailInfo.rescueProjectName }}</text>
					</view>
					<view class="list-cell">
						<view class="list-cell-item">
							<view class="cell-label">车辆信息：</view>
							<view class="cell-content">
								{{ detailInfo.brandModel? detailInfo.brandModel:'' }}
								<view class="plate-num" v-if="detailInfo.plateNum">
									<view class="num1">{{detailInfo.plateNum? detailInfo.plateNum.substring(0,2):'' }}
									</view>
									<view class="num2">
										{{ detailInfo.plateNum?detailInfo.plateNum.substring(2,detailInfo.plateNum.length):'' }}
									</view>
								</view>
							</view>
						</view>
						<view class="list-cell-item">
							<view class="cell-label">求助时间：</view>
							<view class="cell-content">
								{{ detailInfo.createdTime }}
							</view>
						</view>
						<view class="list-cell-item">
							<view class="cell-label">联系人：</view>
							<view class="cell-content">
								{{ detailInfo.contacts }}
								<text
									style="padding-left: 10rpx;">{{ (detailInfo.phone).replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')}}</text>
							</view>
						</view>
						<view class="list-cell-item">
							<view class="cell-label">救援地址：</view>
							<view class="cell-content">
								{{ detailInfo.rescueAddress }}
							</view>
						</view>
						<view class="list-cell-item" v-if="detailInfo.rescueProjectScope == 2">
							<view class="cell-label">拖车终点：</view>
							<view class="cell-content">
								{{ detailInfo.endAddress }}
							</view>
						</view>
					</view>
				</view>
				<view class="info-card" v-if="detailInfo.state == 4||detailInfo.state == 5">
					<view class="title">费用清单</view>
					<view class="payment">
						<view class="pay-title">维修服务费</view>
						<view class="pay-total">{{ detailInfo.serviceCharge }}</view>
					</view>
					<view class="payment">
						<view class="pay-title"></view>
						<view class="pay-total">费用合计：<text style="color:#CF1A1B">￥{{ detailInfo.totalPayment }}</text>
						</view>
					</view>
				</view>
				<view class="info-card" v-if="detailInfo.state == 5">
					<view class="title">我的评价</view>
					<view class="rate-cell">
						<view class="rate-title"> {{ detailInfo.score||detailInfo.evaluate ?'感谢您的评价':'让救援做的更好'}}</view>
						<view class="rate-count">
							<u-rate :count="5" v-model="detailInfo.score" size="45" readonly></u-rate>
						</view>
					</view>
					<view class="rate-reson">
						{{
							detailInfo.evaluate?detailInfo.evaluate:''
						}}
					</view>
				</view>
				<view class="info-card">
					<view class="list-cell">
						<view class="list-cell-item">
							<view class="cell-label">订单编号：</view>
							<view class="cell-content copy">
								{{ detailInfo.code }}
								<image
									src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/copy.png"
									@click="onCopy(detailInfo.code)"></image>
							</view>
						</view>
						<view class="list-cell-item">
							<view class="cell-label">下单时间：</view>
							<view class="cell-content">
								{{ detailInfo.createdTime }}
							</view>
						</view>
						<view class="list-cell-item">
							<view class="cell-label">支付方式：</view>
							<view class="cell-content">
								在线支付
							</view>
						</view>
						<view class="list-cell-item">
							<view class="cell-label">配送状态：</view>
							<view class="cell-content">
								上门服务
							</view>
						</view>
						<view class="list-cell-item">
							<view class="cell-label">支付状态：</view>
							<view class="cell-content" style="color: #CF1A1B;">
								{{ detailInfo.payState }}
							</view>
						</view>
						<view class="list-cell-item" style="border-top:2rpx solid #eee" v-if="detailInfo.state == 5">
							<view class="cell-label">费用合计：</view>
							<view class="cell-content cell-content-flex-end">
								￥{{ detailInfo.totalPayment }}
							</view>
						</view>
						<view class="list-cell-item" v-if="detailInfo.state == 5">
							<view class="cell-label" style="width: 200rpx;">优惠券抵扣：</view>
							<view class="cell-content cell-content-flex-end" style="width: clalc(100% - 200rpx);">
								￥{{ 0.00 }}
							</view>
						</view>
						<view class="list-cell-item" v-if="detailInfo.state == 5">
							<view class="cell-label"></view>
							<view class="cell-content cell-content-flex-end">
								￥<text style="color: #CF1A1B;">{{ detailInfo.totalPayment }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="card-last"></view>
			</view>
		</view>
		<view class="oprate-btn" v-if="detailInfo.state == 4||detailInfo.state == 1||detailInfo.state == 5">
			<view class="btn" v-if="detailInfo.state == 4">
				<u-button type="primary" text="去支付" color="#CF1A1B" shape="circle" :loading="payLoading"
					@click="payPop=true"></u-button>
			</view>
			<view class="btn" v-if="detailInfo.state == 1">
				<u-button type="primary" text="取消订单" color="#CF1A1B" shape="circle" @click="openCancelOrderPop"
					plain></u-button>
				<u-button type="primary" text="联系客服" color="#CF1A1B" shape="circle" @click="callPhone"></u-button>
			</view>
			<view class="btn" v-if="detailInfo.state == 5&&(!detailInfo.score&&!detailInfo.evaluate)">
				<u-button type="primary" text="去评价" color="#CF1A1B" shape="circle" :loading="payLoading"
					@click="openRatePop"></u-button>
			</view>

		</view>
		<u-popup :show="payPop" @close="payPop=false" mode="bottom">
			<view class="pay-pop">
				<view class="pay-list">
					<view class="pay-cell total-cell">
						<view class="pay-label">费用合计</view>
						<view class="pay-count">￥{{detailInfo.totalPayment}}</view>
					</view>
					<view class="pay-cell">
						<view class="pay-label">优惠券</view>
						<view class="pay-count">没有优惠券</view>
					</view>
				</view>
				<view class="pay-status">
					<image
						src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/rescue-state4.png"
						mode=""></image>
					待付款
				</view>
				<view class="pay-count">￥{{detailInfo.totalPayment}}</view>
				<view class="pay-tip">请尽快完成支付</view>
				<view class="pop-btn">
					<u-button type="primary" text="立即支付" color="#CF1A1B" shape="circle" @click="buyNow"></u-button>
				</view>

			</view>
		</u-popup>
		<u-popup :show="cancelPop" @close="cancelPop=false" mode="bottom">
			<view class="cancel-pop">
				<view class="cancel-list">
					<u-radio-group v-model="driverReason" placement="column">
						<view class="item" v-for="item in reasonList" :key="item.code" @click="reasonHandle(item.code)">
							<view>{{item.name}}</view>
							<u-radio :name="item.code" label=" " size="30" activeColor="red" iconSize="25"
								shape="circle"></u-radio>
						</view>
					</u-radio-group>

				</view>
				<view class="pop-btn">
					<u-button type="primary" text="关闭" color="#CF1A1B" shape="circle" @click="cancelPop=false"
						plain></u-button>
					<u-button type="primary" text="确定" color="#CF1A1B" shape="circle" @click="cancelOrder"></u-button>
				</view>

			</view>
		</u-popup>
		<u-popup :show="ratePop" @close="ratePop=false" mode="bottom">
			<view class="rate-pop">
				<view class="rate-source">
					<u-rate :count="5" v-model="score" size="45"></u-rate>
					<text v-if="score == 1">非常不好</text>
					<text v-if="score == 2">不好</text>
					<text v-if="score == 3">一般</text>
					<text v-if="score == 4">好</text>
					<text v-if="score == 5">非常好</text>
				</view>
				<view class="rate-tare">
					<u--textarea height="180" v-model="evaluate" placeholder="亲，快来评价下本次服务体验吧，可以从服务态度等方面描述哦~" count
						:maxlength="100" cursorSpacing="30" ></u--textarea>
				</view>
				<view class="pop-btn">
					<u-button type="primary" text="关闭" color="#CF1A1B" shape="circle" @click="ratePop=false"
						plain></u-button>
					<u-button type="primary" text="确定" color="#CF1A1B" shape="circle" @click="rateOrder"></u-button>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import payment from '@/mixins/payment.js'
	import QQMapWX from '@/lib/qqmap-wx-jssdk.js'
	export default {
		name: 'rescue-detail',
		components: {
			navBar
		},
		computed: {
			...mapGetters('global', ['getSystemInfo']),
			...mapGetters('user', ['getUserInfo']),
		},
		mixins: [payment],
		data() {
			return {
				info: '',
				mapInfo: {
					latitude: 22.568943,
					longitude: 113.870823
				},
				covers: [],
				mapContext: null,
				detailInfo: null,
				cancelPop: false,
				driverReason: '',
				reasonList: [],
				ratePop: false,
				score: 5,
				evaluate: '',
				currentId: '',
				payLoading: false,
				rescueingTime: '',
				timer: null,
				circles: [],
				waitRescueTime: '',
				polyline: [],
				durationTime: 0,
				waitDispatchTime: 0,
				totalTime: 0,
				orderId: '',
				currentType: '',
				scale: 10,
				payPop: false
			}
		},
		mounted() {
			this.mapContext = uni.createMapContext("mapBox", this);
		},
		methods: {
			back() {
				if (this.currentType == 2) {
					uni.switchTab({
						url: '/pages/index/index/index'
					})
				} else {
					uni.navigateBack()
				}
			},
			//切换原因
			reasonHandle(val) {
				this.driverReason = val
			},
			//随机数生成
			roundNum(n) {
				var rnd = "";
				for (var i = 0; i < n; i++)
					rnd += Math.floor(Math.random() * 10);
				return parseInt(rnd);
			},
			// 初始化页面
			async initData() {			
				clearInterval(this.timer)
				this.timer = null
				this.circles = []
				this.covers = []
				this.polyline = []
				try {
					const res = await this.$request({
						url: '/order-center/road/rescue/getRoadRescueDetail',
						data: {
							id: this.currentId,
							userId: this.getUserInfo.id
						}
					})
					this.detailInfo = res.datas
					this.mapInfo.latitude = this.detailInfo.lat
					this.mapInfo.longitude = this.detailInfo.lng
					//待派单
					if (this.detailInfo.state == 1) {
						this.getReason()
						let circlesObj = {
							latitude: this.detailInfo.lat,
							longitude: this.detailInfo.lng,
							fillColor: "#e6060a6A", //填充颜色
							color: "#e6060a6A", //描边的颜色
							radius: 200, //半径
							strokeWidth: 3 //描边的宽度
						}
						this.circles.push(circlesObj)
						this.timer = setInterval(() => {
							this.waitDispatchTime = this.formatTime(this.detailInfo.createdTime)
							this.covers = [{
								id: this.roundNum(6),
								latitude: this.detailInfo.lat,
								longitude: this.detailInfo.lng,
								iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jyzd.png',
								width: "40",
								height: "40",
								callout: { //marker气泡
									content: `待派单\n${this.waitDispatchTime}`,
									color: "#000",
									bgColor: "#fff",
									borderRadius: 4,
									fontSize: 12,
									textAlign: "center",
									padding: 6,
									display: 'ALWAYS',
								},
							}]
						}, 1000)

					}
					//待救援
					if (this.detailInfo.state == 2) {
						let startPiont = {
							id: this.roundNum(6),
							latitude: this.detailInfo.terminalDetail.lat,
							longitude: this.detailInfo.terminalDetail.lng,
							iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jywz.png',
							width: "40",
							height: "50"
						}
						let endPiont = {
							id: this.roundNum(6),
							latitude: this.detailInfo.lat,
							longitude: this.detailInfo.lng,
							iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jypoint.png',
							width: "40",
							height: "40",
						}
						this.covers.push(endPiont)
						this.covers.push(startPiont)
						this.timer = setInterval(() => {
							this.waitRescueTime = this.formatTime(this.detailInfo.dispatchTime)
						}, 1000)
						// 根据门店到救援点划线
						this.drawPolyline({
							lat: this.detailInfo.terminalDetail.lat,
							lng: this.detailInfo.terminalDetail.lng
						}, {
							lat: this.detailInfo.lat,
							lng: this.detailInfo.lng
						}, '#CF1A1B')
					}
					//救援中,待付款，已完成
					if (this.detailInfo.state == 3 || this.detailInfo.state == 4 || this.detailInfo.state == 5) {
						if (this.detailInfo.state == 3) {
							this.timer = setInterval(() => {
								this.rescueingTime = this.formatTime(this.detailInfo.rescueStartTime)
							}, 1000)
							this.totalTime = this.formatTime(this.detailInfo.dispatchTime, this.detailInfo
								.rescueStartTime)
						}

						// 先设置终点位置

						if (this.detailInfo.state == 5) {
							this.covers = [{
								id: this.roundNum(6),
								latitude: this.detailInfo.lat,
								longitude: this.detailInfo.lng,
								iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jypoint.png',
								width: "40",
								height: "50",
								callout: { //marker气泡
									content: `救援已完成\n${this.detailInfo.rescueEndTime}`,
									color: "#000",
									bgColor: "#fff",
									borderRadius: 4,
									fontSize: 12,
									textAlign: "center",
									padding: 6,
									display: 'ALWAYS',
								}
							}]
						} else {
							this.covers = [{
								id: this.roundNum(6),
								latitude: this.detailInfo.lat,
								longitude: this.detailInfo.lng,
								iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jypoint.png',
								width: "40",
								height: "50"
							}]
						}


						// 根据门店到救援点划线，救援司机可以随时点击到达
						// rescueProjectScope:2-拖车救援
						if (this.detailInfo.rescueProjectScope == 2) {
							this.covers.push({
								id: this.roundNum(6),
								latitude: this.detailInfo.endLat ? this.detailInfo.endLat : this.detailInfo
									.terminalDetail.lat,
								longitude: this.detailInfo.endLng ? this.detailInfo.endLng : this.detailInfo
									.terminalDetail.lng,
								iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jyend.png',
								width: "40",
								height: "50",
							})
							this.drawPolyline({
									lat: this.detailInfo.endLat ? this.detailInfo.endLat : this.detailInfo
										.terminalDetail.lat,
									lng: this.detailInfo.endLng ? this.detailInfo.endLng : this.detailInfo
										.terminalDetail.lng
								}, {
									lat: this.detailInfo.lat,
									lng: this.detailInfo.lng
								}, (this.detailInfo.state == 4 || this.detailInfo.state == 5) ? '#847f7f' :
								'#CF1A1B')
						} else {
							this.covers.push({
								id: this.roundNum(6),
								latitude: this.detailInfo.terminalDetail.lat,
								longitude: this.detailInfo.terminalDetail.lng,
								iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jyqd.png',
								width: "40",
								height: "50",
							})
							if (this.detailInfo.terArriveLat) {
								this.drawPolyline({
									lat: this.detailInfo.terminalDetail.lat,
									lng: this.detailInfo.terminalDetail.lng
								}, {
									lat: this.detailInfo.terArriveLat,
									lng: this.detailInfo.terArriveLng
								}, '#847f7f')
								this.drawPolyline({
									lat: this.detailInfo.terArriveLat,
									lng: this.detailInfo.terArriveLng
								}, {
									lat: this.detailInfo.lat,
									lng: this.detailInfo.lng
								}, '#CF1A1B')
							} else {
								this.drawPolyline({
									lat: this.detailInfo.terminalDetail.lat,
									lng: this.detailInfo.terminalDetail.lng
								}, {
									lat: this.detailInfo.lat,
									lng: this.detailInfo.lng
								}, '#847f7f')
							}
						}


					}
					//已取消
					if (this.detailInfo.state == 6) {
						this.covers.push({
							id: this.roundNum(6),
							latitude: this.detailInfo.lat,
							longitude: this.detailInfo.lng,
							iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jypoint.png',
							width: "40",
							height: "50",
						})					
						if (this.detailInfo.terminalDetail) {
							this.covers.push({
								id: this.roundNum(6),
								latitude: this.detailInfo.terminalDetail.lat,
								longitude: this.detailInfo.terminalDetail.lng,
								iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jyqd.png',
								width: "40",
								height: "50",
							})
						}
						if (this.detailInfo.terArriveLat) {
							this.drawPolyline({
								lat: this.detailInfo.terminalDetail.lat,
								lng: this.detailInfo.terminalDetail.lng
							}, {
								lat: this.detailInfo.lat,
								lng: this.detailInfo.lng
							}, '#847f7f')
						} else {
							this.drawPolyline({
								lat: this.detailInfo.terminalDetail.lat,
								lng: this.detailInfo.terminalDetail.lng
							}, {
								lat: this.detailInfo.lat,
								lng: this.detailInfo.lng
							}, '#CF1A1B')
						}

					}
				} catch (e) {

				}
			},
			//规划路线
			drawPolyline(fromLocation, toLocation, color) {
				const qqmapsdk = new QQMapWX({
					// 测试key
					key: this.$mapKey
				})
				const self = this;
				var fromLocation = {
					latitude: fromLocation.lat,
					longitude: fromLocation.lng
				};
				var toLocation = {
					latitude: toLocation.lat,
					longitude: toLocation.lng
				};
				qqmapsdk.direction({
					mode: 'driving',
					from: fromLocation,
					to: toLocation,
					heading: 90,
					accuracy: 5,
					road_type: 6,
					success: function(res) {
						var coors = res.result.routes[0].polyline;
						var pl = []; // 点串数组
						// 坐标解压(返回的点串坐标，通过前向差分进行压缩)
						var kr = 1000000;
						for (var i = 2; i < coors.length; i++) {
							coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
						}
						// 将解压后的坐标放入点串数组pl中
						for (var i = 0; i < coors.length; i += 2) {
							pl.push({
								latitude: coors[i],
								longitude: coors[i + 1]
							});
						}
						self.durationTime = res.result.routes[0].duration
						self.polyline.push({
							points: pl,
							color: color,
							width: 8,
							arrowLine: false
						})
					}.bind(this),
					fail: function(error) {
						console.log(error);
					}
				});
			},

			//设置等待时间
			formatTime(startTime, endTime) {
				var date1 = new Date(startTime.replace(/-/g, '/')).getTime()
				var date2 = endTime ? new Date(endTime.replace(/-/g, '/')).getTime() : new Date().getTime();
				var date3 = date2 - date1;
				var days = Math.floor(date3 / (24 * 3600 * 1000));
				if (days < 0) {
					days = days * (-1)
				}
				var leave1 = date3 % (24 * 3600 * 1000);
				var hours = Math.floor(leave1 / (3600 * 1000));
				var leave2 = leave1 % (3600 * 1000);
				var minutes = Math.floor(leave2 / (60 * 1000));
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);
				return (days > 0 ? days + "天 " : '') + (hours == 0 ? '' : (hours < 10 ? '0' + hours : hours) + ":") + (
					minutes < 10 ? '0' +
					minutes : minutes) + ":" + (seconds < 10 ? '0' + seconds : seconds)
			},
			//获取取消原因
			async getReason() {
				try {
					const res = await this.$request({
						url: '/user-center/ter-terminal/get-dict-by-code',
						data: {
							code: 'driver_reason',
							pageNum: 1,
							pageSize: 100
						}
					})
					this.reasonList = res.datas
				} catch (e) {

				}
			},
			//电话
			callPhone() {
				// 区分设备
				if (uni.getSystemInfoSync().osName === 'ios') {
					uni.makePhoneCall({
						phoneNumber: '400-696-5399'
					})
				} else {
					uni.showModal({
						title: "拨打电话",
						content: '400-696-5399',
						confirmText: "确认",
						cancelText: "取消",
						success: res => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: '400-696-5399'
								})
							}
						}
					})
				}
			},
			handleAction(con, item) {
				if (con === 'phone') {
					// 区分设备
					if (uni.getSystemInfoSync().osName === 'ios') {
						uni.makePhoneCall({
							phoneNumber: item.terminalPhone
						})
					} else {
						uni.showModal({
							title: "拨打电话",
							content: item.terminalPhone,
							confirmText: "确认",
							cancelText: "取消",
							success: res => {
								if (res.confirm) {
									uni.makePhoneCall({
										phoneNumber: item.terminalPhone
									})
								}
							}
						})
					}
				} else {
					uni.openLocation({
						latitude: item.lat,
						longitude: item.lng,
						name: item.terminalName,
						address: item.address,
					});
				}
			},
			//立即支付
			async buyNow() {
				this.payLoading = true
				uni.showLoading({
					title: '网络请求中'
				})
				try {
					// 提交订单
					const {
						datas
					} = await this.$request({
						url: '/order-center/road/rescue/roadRescuePayment',
						data: {
							id: this.detailInfo.id,
							actualPayment: this.detailInfo.totalPayment,
						}
					})
					this.orderId = this.detailInfo.id
					this.payLoading = false
					uni.hideLoading()
					// // 跳转拉卡拉支付
					this.toPay(datas.counterUrl, {
						paySuccessRedirectURL: '/rescuePack/rescuePaySuccess/index',
						isHadPaymentAPI: '/order-center/road/rescue/getPayDetail',
						type: 'rescue'
					})
				} catch (err) {
					this.payLoading = false
					uni.hideLoading()
					this.$refs.uToast.show({
						message: err.respMsg || '创建订单失败',
						position: 'top'
					})
				}
			},
			//打开取消原因弹窗
			openCancelOrderPop() {
				this.cancelPop = true

			},
			//打开评价弹窗
			openRatePop(val) {
				this.ratePop = true
			},
			//取消订单
			async cancelOrder() {
				if (!this.driverReason) {
					this.$refs.uToast.show({
						type: 'default',
						message: '请选择取消原因！'
					})
					return false
				}
				try {
					const res = await this.$request({
						url: '/order-center/road/rescue/cancellationRoadRescue',
						data: {
							driverReason: this.driverReason,
							id: this.currentId,
							type: 1,
							userId: this.getUserInfo.id
						}
					})
					this.$refs.uToast.show({
						type: 'default',
						message: '已取消该订单！'
					})
					this.cancelPop = false
					this.initData()

				} catch (e) {
					this.$refs.uToast.show({
						type: 'default',
						message: e.respMsg
					})
				}
			},
			//评价订单
			async rateOrder() {
				try {
					const res = await this.$request({
						url: '/order-center/road/rescue/roadRescueEvaluate',
						data: {
							id: this.currentId,
							score: this.score,
							evaluate: this.evaluate,
							userId: this.getUserInfo.id,
						}
					})
					this.$refs.uToast.show({
						type: 'default',
						message: '感谢您的评价！'
					})
					this.ratePop = false
					this.initData()

				} catch (e) {
					this.$refs.uToast.show({
						type: 'default',
						message: e.respMsg
					})
				}
			},
			//复制
			onCopy(data) {
				uni.setClipboardData({
					data: data, // 复制的内容 
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 1000
						})
					}
				});
			},
			handleDetail(item) {
				uni.navigateTo({
					url: `/storePack/detail/detail?terminalId=${item.id}&longitude=${item.lng}&latitude=${item.lat}`
				})
			},
		},
		onShow() {

		},
		onLoad(option) {
			this.currentId = option.id
			this.currentType = option.type
			this.initData()
		},
		onUnload(){
			this.timer = null
			clearInterval(this.timer)
		},

	}
</script>

<style scoped lang="scss">
	.rescue-detail-wrap {
		height: 100%;
		width: 100%;
		overflow: hidden;
		overflow-y: auto;
		position: relative;

		.oprate-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #f5f5f5;

			/deep/ .u-button {
				margin: 0 10rpx;
			}

			.btn {
				display: flex;
				padding: 24rpx 32rpx;
			}
		}

		.pay-pop {
			.pay-list {
				padding: 20rpx;

				.pay-cell {
					padding: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #666666;
				}

				.total-cell {
					border-bottom: 2rpx solid #eee;
					color: #000;
				}
			}

			.pay-status {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 18px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-top: 40rpx;

				image {
					width: 34rpx;
					height: 34rpx;
					margin-right: 10rpx;
				}
			}

			.pay-count {
				margin-top: 20rpx;
				font-size: 16px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				text-align: center;
			}

			.pay-tip {
				margin-top: 20rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				text-align: center;
			}

			.pop-btn {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;

				/deep/ .u-button {
					width: 85% !important;
				}
			}
		}

		.cancel-pop {
			padding: 20rpx 24rpx;

			.cancel-list {
				.item {
					display: flex;
					justify-content: space-between;
					padding: 24rpx 26rpx;
					align-items: center;
					border-bottom: 2rpx solid #eee;
				}
			}

			.pop-btn {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				/deep/ .u-button {
					width: 45% !important;
				}
			}
		}

		.rate-pop {
			padding: 20rpx 24rpx;

			.rate-source {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 24rpx;
			}

			.pop-btn {
				display: flex;
				justify-content: space-between;
				margin-top: 40rpx;

				/deep/ .u-button {
					width: 45% !important;
				}
			}
		}

		.content-box {
			height: calc(100% - 128rpx);

			.map-wrapper {
				height: 50%;
				position: relative;
			}

			.detail-info {
				// height: 50%;
				padding-bottom: 128rpx;

				.card-last {
					height: 128rpx;
				}

				.status-info {
					padding: 30rpx 0;

					.status-img {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 18px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: bold;
						color: #333333;

						image {
							width: 36rpx;
							height: 36rpx;
							margin-right: 20rpx;
						}

						.status-time {
							margin-left: 20rpx;
						}
					}

					.pay-info {
						padding-top: 20rpx;
						text-align: center;

						.pay-count {
							font-size: 16px;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: bold;
							color: #333333;
						}

						.pay-btn {
							display: flex;
							justify-content: center;
							padding-top: 40rpx;

							/deep/ .u-button {
								width: 300rpx;
								height: 70rpx;
							}
						}
					}

					.status-tip {
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-top: 20rpx;
						padding: 0 100rpx;

						.text-red {
							color: #CF1A1B;
							margin: 0 10rpx;
						}
					}
				}

				.info-card {
					margin: 20rpx;
					width: calc(100% - 104rpx);
					background: #fff;
					border-radius: 8rpx;
					padding: 24rpx 32rpx;

					.title {
						padding-bottom: 24rpx;
						font-size: 16px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
					}

					.card-plane {
						background: #FAFAFA;
						border-radius: 16rpx;
					}

					.rate-reson {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						display: flex;
						margin-top: 20rpx;
					}

					.list-cell {
						.list-cell-item {
							padding: 12rpx 0;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							display: flex;
							align-items: center;

							.cell-label {
								width: 160rpx;
								text-align: left;
								margin-right: 24rpx;
							}

							.cell-content {
								display: flex;
								align-items: center;
								width: calc(100% - 184rpx);

								.plate-num {
									border-radius: 5rpx;
									border: 1rpx solid #22D194;
									background: #22D194;
									color: #fff;
									display: flex;
									margin-left: 20rpx;

									.num1 {
										padding: 4rpx;
									}

									.num2 {
										padding: 4rpx;
										padding-left: 4rpx;
										background: #fff;
										color: #22D194;
									}
								}
							}

							.copy {
								image {
									width: 40rpx;
									height: 40rpx;
								}
							}

							.cell-content-flex-end {
								justify-content: flex-end;
							}
						}
					}

					.payment {
						display: flex;
						align-items: center;

						.pay-title {
							width: 160rpx;
							text-align: left;
							margin-right: 24rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						.pay-total {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							width: calc(100% - 160rpx);
							text-align: right;
						}

					}

					.rate-cell {
						display: flex;
						align-items: center;

						.rate-title {
							width: 210rpx;
							text-align: left;
							margin-right: 24rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						.rate-count {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							width: calc(100% - 210rpx);
							display: flex;
							justify-content: flex-end;
						}
					}
				}

				.lx {
					display: flex;

					.lx-it {
						width: 50%;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 100rpx;
							height: 100rpx;
						}
					}
				}

				.store {
					.store-info {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						margin-bottom: 20rpx;

						image {
							width: 112rpx;
							height: 112rpx;
							border-radius: 8rpx;
							margin-right: 20rpx;
						}

						.store-del {
							width: calc(100% - 112rpx);
							display: flex;
							align-items: center;
							justify-content: flex-start;

							.store-name {
								font-size: 32rpx;
								font-family: PingFangSC-Semibold, PingFang SC;
								font-weight: 600;
								color: #262626;
								padding-bottom: 8rpx;
							}

							.store-adress {
								font-size: 22rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
							}
						}
					}
				}

				.service-info {
					.project-name {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						padding: 24rpx 0;

						image {
							width: 80rpx;
							height: 80rpx;
							margin-right: 20rpx;
						}
					}

				}
			}
		}
	}
</style>